<template>
	<view class="p-x-30 p-y-30">
		<!-- 公告 -->
		<view class="gradientCard">
			<view class="  p-x-30 p-y-20 border-radius-8" @click="message">
				<view style="display: flex;align-items: center;margin-right:20rpx ;">
					<image style="width: 45rpx;height: 45rpx;" src='../../static/images/home/message.png' mode="">
					</image>
					<u-notice-bar :text="notice" direction="row" color="#fff" :icon="false" disableTouch
						bgColor="rgba(39, 44, 82, 1)"></u-notice-bar>
				</view>

			</view>
		</view>

		<view class="mt-50">
			<u-swiper height='200' :list="list1" @click="click" radius='12' keyName="img_url"></u-swiper>
		</view>

		<view class="gradientCard mt-25">
			<view class=" p-x-30 p-y-20 flex-sb">
				<view style="display: flex;flex-direction: column;align-items: center;" :key="index"
					v-for="(item,index) in taglist" @click="tag(index)">
					<image style="width: 130rpx;height: 130rpx;" :src="`../../static/images/home/inde${index+1}.png`"
						mode="">
					</image>
					<view class="s1 mt-16">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>


		<view class="gradientCard  mt-30">


			<view class="card p-x-20 p-y-30">
				<view class="body-s1 mb-45" style="width: 160rpx;">
					产品中心
					<view class="lins mt-10">

					</view>
				</view>
				<view class="w100 mb-60" style="position: relative;" v-for="(item,index) in vip" :key="index"
					@click="product(index+1,item.project_name,item.project_id)">
					<image style="width: 658rpx; height: 350rpx;border-radius: 20rpx;position: absolute;top: 0;"
						:src="item.project_image_project_view_url" mode="widthFix"></image>
					<!-- <image style="width: 658rpx; height: 350rpx;border-radius: 20rpx;position: absolute;top: 0;"
						:src="`../../static/images/home/box${index+1}.png`" mode=""></image> -->
					<!-- <image style="width: 250rpx;height: 250rpx;position: absolute;right: -20rpx;top: 30rpx;"
						src="../../static/images/home/box-1.png" mode=""></image> -->
					<view class=" p-x-40 p-y-40" style="position: relative;">
						<view style="display: flex;align-items: center;">
							<!-- <image style="width: 54rpx;height: 56rpx;margin-right: 20rpx;"
								src='../../static/images/home/tag1.png' mode=""></image> -->
							<view class="bots1 ">
								{{item.project_name}}
							</view>
						</view>
						<view class="" style="display: flex;align-items: center;">
							<view class="mt-50" style="margin-right: 40rpx;">
								<view class="s2">
									{{item.days}}天
								</view>
								<view class="s3 mt-30">
									产品周期
								</view>
							</view>
							<view class="mt-50" style="margin-right: 40rpx;">
								<view class="s2">
									{{item.project_price_ytc}}
								</view>
								<view class="s3 mt-30">
									产品金额
								</view>
							</view>
							<view class="mt-50">
								<view class="s2">
									{{item.days_interval}}
								</view>
								<view class="s3 mt-30">
									每天返利
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;">

		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				vip: [],
				taglist: [{
						name: '项目介绍'
					},
					{
						name: '在线客服'
					},
					{
						name: '邀请好友'
					},
					{
						name: '软件下载'
					}
				],
				chooseList1: ['跑腿'],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		onLoad(option) {
			console.log('option: ', option);
			this.getSetting()
			this.getSwiper()
		},
		onShow() {
			this.projects()
		},
		computed: {
			notice() {
				return this.setting.notice_text || ''
			}
		},
		methods: {
			getSwiper() {
				this.$http.get('user/get_images').then(res => {
					if (res.code == 200) {
						this.list1 = [...res.data]
					}
				})
			},
			//获取商品列表
			async projects() {
				let res = await this.$http.get('user/get_projects', {})
				this.vip = res.data
			},

			message() {
				uni.navigateTo({
					url: '/pages/index/message/message'
				})
			},
			//产品
			product(type, name, id) {
				uni.navigateTo({
					url: '/pages/index/product?type=' + type + '&name=' + name + '&id=' + id
				})
			},
			tag(index) {
				let url = ''
				switch (index / 1) {
					case 0:
						// 项目介绍
						url = '/pages/index/Introduction'
						break;
					case 1:
						// 拼团
						if (this.setting.kefu_url) {
							if (this.userInfo && this.userInfo.user_id) {
								let arr = this.setting.kefu_url.split('/')
								let u = arr[arr.length - 1]
								let domain = this.setting.kefu_url.split('/kefu/')[0]
								// "https://chatim5.kuyouyun.com/kefu/65a0e15fb82e8"
								let path = encodeURIComponent(
									`${domain}/index/index/kefu?u=${u}&uid=${this.userInfo.user_id}&name=${this.userInfo.nickname}&avatar=${this.userInfo.avter}`
								)
								// #ifdef H5
								window.open(decodeURIComponent(path))
								return
								// #endif 
								url = `/pages/webview/webview?src=${path}`
							} else {
								// #ifdef H5
								window.open(this.setting.kefu_url)
								return
								// #endif

								url = `/pages/webview/webview?src=${encodeURIComponent(this.setting.kefu_url)}`
							}
						}

						break;
					case 2:
						// 邀请好欧30
						url = '/pages/index/invite'
						break;
					case 3:
						// 邀请好欧30
						url = '/pages/index/download'
						break;

				}
				uni.navigateTo({
					url
				})

			}

		}
	}
</script>

<style lang="less">
	page {
		background-color: #1E2240;
	}

	.lin {
		background-color: #272C52;
		border: 2rpx solid #707070;
		border-image: radial-gradient(#801FF0 50%, #FF2CDF 100%)14;
		// clip-path: inset(0 round 10rpx);//裁剪

	}

	.body-s1 {
		font-size: 40rpx;
		color: #fff;
		font-weight: 500;

	}

	.lins {

		height: 6rpx;
		background: linear-gradient(90deg, #6C6CFF 0%, #A67DFF 100%);

	}

	.s1 {
		font-size: 24rpx;
		color: #fff;
		font-weight: 400;
	}

	.bots1 {
		font-size: 48rpx;
		font-weight: 400;
		color: #fff;
		margin-left: 60rpx;
		margin-top: 10rpx;
	}

	.s2 {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.s3 {
		font-size: 28rpx;
		font-weight: 400;
		color: #fff;
	}

	.text-line-2 {
		display: -webkit-box;
		word-break: break-all;
		/*超出文字用省略号代替*/
		text-overflow: ellipsis;
		/*竖直方向的超出和隐藏*/
		-webkit-box-orient: vertical;
		/*设定行数为2*/
		-webkit-line-clamp: 2;
		/*多出部分隐藏*/
		overflow: hidden;

	}
</style>